<template>
    <el-card class="box-card">
        <el-row>
            <el-col :span="5">
                <el-input v-model="searchVal" placeholder="Please input" @change="Search" />
            </el-col>
            <el-col :span="12">
                <el-button type="primary" @click="Search">查询</el-button>
                <el-button type="primary" @click="open">新增</el-button>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col>
                <el-table :data="tableData" style="width: 100%; height: 65vh;" border row-key="Id">
                    <el-table-column type="index" label="编号" width="70" />
                    <el-table-column prop="MenuName" label="名称" width="180" />
                    <el-table-column prop="Index" label="路径" />
                    <el-table-column prop="FilePath" label="组件名" />
                    <el-table-column prop="Icon" label="图标">
                        <template #default="scope">
                            <IconCom :icon="scope.row.Icon"></IconCom>
                        </template>
                    </el-table-column>
                    <el-table-column prop="IsEnable" label="是否启用">
                        <template #default="scope">
                            <el-switch v-model="scope.row.IsEnable" disabled />
                        </template>
                    </el-table-column>
                    <el-table-column prop="CreateDate" label="创建时间" width="170" />
                    <el-table-column prop="Description" label="描述" width="280" />
                    <el-table-column label="操 作" align="center">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.row)">Edit</el-button>
                            <el-button size="small" type="danger" @click="handleDel(scope.row.Id)">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </el-card>
    <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add>
</template>
  
<script lang="ts" setup>
import { Ref, onMounted, ref } from 'vue'
import Menu from '../../../class/Menu'
import IconCom from '../../../components/IconCom.vue'
import { delMenu, getTreeMenu } from '../../../http'
import { ElMessage, ElMessageBox } from 'element-plus'
import add from './Add.vue'
import { SettingUserRouter } from '../../../tools'
const tableData: Ref<Array<Menu>> = ref<Array<Menu>>([])
const searchVal = ref('')
let parms = {
    Name: "",
    Index: "",
    FilePath: "",
    Description: ""
}
const load = async () => {
    parms.Name = searchVal.value
    tableData.value = await getTreeMenu(parms) as any as Array<Menu>
}
const Search = async () => {
    await load()
}
onMounted(async () => { await load() })

//====新增/修改/删除逻辑====
const isShow = ref(false)
const info: Ref<Menu> = ref<Menu>(new Menu())
const open = () => {
    isShow.value = true
}
const closeAdd = () => {
    isShow.value = false
    info.value = new Menu()
}
const handleEdit = (row: Menu) => {
    info.value = row
    isShow.value = true
}
const success = async (message: string) => {
    isShow.value = false
    info.value = [] as any as Menu
    ElMessage.success(message)
    await load()
    //重载路由
    await SettingUserRouter()
}
const handleDel = async (index: number) => {
    ElMessageBox.confirm("确认要删除这条数据吗？", "删除提示", {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
    }).then(async () => {
        var res = await delMenu(index)
        if (res) {
            await load()
            ElMessage({ type: 'success', message: '删除成功！' })
        } else {
            ElMessage({ type: 'error', message: '删除失败!' })
        }
    }).catch(() => { })
}
</script>
  